<template>
  <view >

    <view class="crumb">
      <view v-for="(val,idx) in typeList" :class="type===idx?'active':''" @tap="typeChange(idx)">{{val.text}}</view>
    </view>

    <view class="item" v-for="(val,idx) in lists" @tap="$xyfun.to('/pages/user/order_detail?id='+val.id)">
      <view class="nav">
        <view>服务订单</view>
        <view class="time">申请时间：{{$xyfun.timeFormat(val.createtime)}}</view>
      </view>
      <view class="user">
        <view><text>学生姓名</text>：{{val.student}}</view>
        <view><text>性别</text>：{{val.sex}}</view>
        <view><text>科目</text>：{{val.subject_text}}</view>
        <view><text>年级</text>：{{val.grade_text}}</view>
      </view>
      <view class="line">辅导地址：{{val.addr}}</view>
      <view class="line">辅导时间：{{val.per_week_time_text}}</view>
      <view class="line">辅学生情况：{{val.state}}</view>
      <view class="teacher" v-if="val.status>=2">
        <view class="tit">试课老师电话</view>
        <view class="mobile" @click.stop="call(val.teacher_mobile)">{{val.teacher_mobile}}<text class="yz-iconfont yz-dianhua"></text></view>
      </view>
      <view class="line tool" v-if="val.status==2">
        <view class="comment" v-if="val.abnormal==''" @click.stop="abnormal_show(val)">未完成试课</view>
        <view v-else></view>
        <view class="comment" @click.stop="comment_show(val)">完成试课</view>
      </view>
    </view>


    <view class="xy-modal-box xy-modal-box-center agreement-box" :class="[agreementModelShow?'xy-modal-show':'']">
      <view class="agree-title">{{agree_title}}</view>
      <view class="agree-content">
        <rich-text :nodes="agree_content"></rich-text>
      </view>

      <view class="agree-action">
        <view class="yes" @tap="agreementModelShow =!agreementModelShow">知道了</view>
      </view>
    </view>
    <view class="xy-modal-mask" :class="[agreementModelShow?'xy-mask-show':'']" @tap="agreementModelShow =!agreementModelShow"></view>

    <!--教师评价-->
    <block>
      <view class="xy-modal-box xy-modal-box-center qrcode-model-box p-tb-20 p-lr-30 br-10 bg-w" :class="[commentShow?'xy-modal-show':'']">
        <view class="com_grade" v-if="commentShow">
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=1?'color:#ff5722':''" @tap="com_grade=1"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=2?'color:#ff5722':''" @tap="com_grade=2"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=3?'color:#ff5722':''" @tap="com_grade=3"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=4?'color:#ff5722':''" @tap="com_grade=4"></view>
          <view class="yz-iconfont yz-shoucang" :style="com_grade>=5?'color:#ff5722':''" @tap="com_grade=5"></view>
        </view>
        <view class="comment" v-if="commentShow">
          <textarea @input="commentInput" placeholder="请填写对老师的真实评价"></textarea>
          <view class="combut" @tap="comment_submit">提交评论</view>
        </view>
      </view>
      <view class="xy-modal-mask" :class="[commentShow?'xy-mask-show':'']" @tap="commentShow =!commentShow"></view>
    </block>

    <!--未完成试课-->
    <block>
      <view class="xy-modal-box xy-modal-box-center qrcode-model-box p-tb-20 p-lr-30 br-10 bg-w" :class="[abnormalShow?'xy-modal-show':'']">
        <view class="comment" v-if="abnormalShow">
          <textarea @input="abnormalInput" placeholder="请大概描述试课情况"></textarea>
          <view class="combut" @tap="abnormalSubmit">确认</view>
        </view>
      </view>
      <view class="xy-modal-mask" :class="[abnormalShow?'xy-mask-show':'']" @tap="abnormalShow =!abnormalShow"></view>
    </block>
  </view>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data() {
    return {
      type : 0,
      typeList: [
        {
          status : 1,
          text : '接单中'
        },
        {
          status : 2,
          text : '试课中'
        },
        {
          status : 3,
          text : '已完成'
        },
        {
          status : -2,
          text : '重新试课'
        }
      ],
      lists : [],
      isEmpty: true,
      currentPage: 1,
      lastPage: 1,

      com_grade: 5,
      comment: '',
      commentShow: false,

      abnormalOrder: '',
      abnormal: '',
      abnormalShow: '',

      commentOrder: '',

      agree_title : '',
      agree_content : '',
      agreementModelShow:false,
    };
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad() {
    this.loadData();
  },
  onPullDownRefresh() {
    this.currentPage = 1;
    this.lists = [];
    this.loadData();
  },
  onReachBottom() {
    if(this.currentPage < this.lastPage) {
      this.currentPage += 1;
      this.loadData();
    }
  },
  methods:{
    async loadData() {
      this.$api.getBase({
        url: '/news/detail',
        data: {
          id:16,
        },
        success: res => {
          this.agree_title = res.name;
          this.agree_content = res.content;
        }
      });
      this.$api.postBase({
        url: 'teacher_order/user_order',
        loadingTip: '加载中...',
        data: {
          page: this.currentPage,
          status : this.typeList[this.type].status
        },
        success: res => {
          uni.stopPullDownRefresh();

          this.lists = [...this.lists,...res.data];
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;

        }
      })
    },
    //提交评论
    comment_submit(){
      var that = this;
      this.$api.postBase({
        url : '/teacher/comment',
        data : {
          order_id : that.commentOrder.id,
          teacher_id : that.commentOrder.teacher_id,
          content : this.comment,
          star : this.com_grade
        },
        success: res=>{
          this.$xyfun.msg('评论成功');
          that.commentShow = false;
          that.currentPage = 1;
          that.lists = [];
          that.loadData();
        }
      })
    },
    abnormal_show(order){
      var that = this;
      uni.showModal({
        title: '提示',
        content: that.common.customConfig.abnormal_order,
        confirmText: '继续操作',
        success: function (res) {
          if(res.confirm){
            that.abnormalShow = true;
            that.abnormalOrder = order;
            that.commentOrder = order;
          }
        }
      });

    },
    abnormalInput(e){
      this.abnormal = e.detail.value;
    },
    abnormalSubmit(){
      var that = this;
      this.$api.postBase({
        url : '/teacher_order/abnormal',
        data : {
          id : that.abnormalOrder.id,
          abnormal : that.abnormal,
        },
        success: res=>{
          let lists = that.lists;
          for(let i=0;i<lists.length;i++){
            if(lists[i].id==that.abnormalOrder.id){
              that.lists[i].abnormal = that.abnormal;
              break;
            }
          }
          that.$xyfun.msg('稍后会有工作人员联系您，请保持电话通畅！');
          that.abnormalShow = false;
        }
      })
    },
    //开始评论
    comment_show(order){
      this.commentShow = true;
      this.commentOrder = order;

    },
    //写入评论
    commentInput(e){
      this.comment = e.detail.value;
    },
    //拨打电话
    call(mobile){
      uni.makePhoneCall({
        phoneNumber : mobile,
      })
    },
    typeChange(e){
      if(e==1){
        this.agreementModelShow = true;
      }
      this.type = e;
      this.currentPage = 1;
      this.lists = [];
      this.loadData();
    },

  }
}
</script>


<style>
page{
  background-color: #f9f9f9;
}
</style>
<style lang="scss">
.crumb {
  display: flex;
  justify-content: space-evenly;
  background: #fff;
  padding-top: 20rpx;
  .active {
    color: #65b8d5;
    border-bottom: 8rpx solid #1e98c4;
    padding-bottom: 20rpx;
    border-radius: 4rpx;
  }
}

.item{
  background: #fff;
  padding: 40rpx 40rpx;
  margin: 20rpx 20rpx;
  .nav{
    display: flex;
    justify-content: space-between;
    .time{
      font-size: 20rpx;
      margin-left:20rpx;
      margin-top: 6rpx;
    }
  }
  .user{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 24rpx;
    view{
      text{
        display: inline-block;
        width: 100rpx;
        text-align-last: justify;
      }
      margin-top: 20rpx;
      width: 50%;
    }
  }
  .line{
    font-size: 24rpx;
    margin-top: 20rpx;
  }

  .tool{
    display: flex;

    .comment{
      background: $uni-color-warning;
      width: 200rpx;
      padding: 0 10rpx;
      height: 50rpx;
      line-height: 50rpx;
      border-radius: 30rpx;
      color: #fff;
      font-size: 24rpx;
      text-align: center;
      margin-right: 20rpx;
    }
  }

  .teacher{
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .tit{
      font-size: 24rpx;
    }
    .mobile{
      font-size: 32rpx;
      .yz-iconfont{
        font-size: 40rpx;
        color: $uni-color-warning;
        margin-left: 20rpx;
      }
    }
  }
}



.agreement-box{
  width: 95%;
  height: 80vh;
  border-radius: 15rpx;
  .agree-title{
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    text-align: center;
    margin-bottom: 20rpx;
  }
  .agree-content{
    padding: 0 20rpx;
    height: calc(80vh - 200rpx);
    overflow: scroll;

  }
  .agree-action{
    padding: 0 20rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    align-items: center;
    view{
      width: 200rpx;
      height: 60rpx;
      border-radius: 10rpx;
      line-height: 60rpx;
      text-align: center;
    }
    .countdown{
      width: 100%;
      background: #f2f2f2;
      color: #333333;
    }
    .yes{
      background: $uni-color-primary;
      color: #fff;
    }

  }
}

.com_grade{
  display: flex;
  margin-top: 30rpx;
  margin-bottom: 40rpx;
  view{
    font-size: 36rpx;
    margin-right: 20rpx;
    color: #c1c1c1;
  }
}
.comment{

  textarea{
    z-index: 0;
  }
  .combut{
    background: #ed8c1b;
    color: #fff;
    width: 300rpx;
    height: 50rpx;
    line-height: 50rpx;
    border-radius: 30rpx;
    text-align: center;
    float: right;
  }
}

</style>
